import React, { Component } from 'react'
import './Home.less'
import { CONFIG } from 'api/config'
import { Carousel, WingBlank } from 'antd-mobile';
import LazyImage from 'base/LazyImage/LazyImage'
import { getUserShopList, findShowCaseRecommendList } from 'api/user'
import { priceFormat } from 'common/js/filter'

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgBaseURL: CONFIG.IMGURL,
      banner: {
        imgArr: [
          'https://hy-bucket-shop.oss-cn-shenzhen.aliyuncs.com/shop/homepage2.jpg',
          'https://hy-bucket-shop.oss-cn-shenzhen.aliyuncs.com/shop/merchant1.jpg'
        ],
        imgHeight: 176
      },
      func: [
        {
          svgName: '#icon-cart_light',
          desc: '线上购物车',
          clickFn: null
        },
        {
          svgName: '#icon-goods_favor_light',
          desc: '门店自助购',
          clickFn: null
        },
        {
          svgName: '#icon-recordlight',
          desc: '广告投放',
          clickFn: null
        },
        {
          svgName: '#icon-calendar',
          desc: '历史订单',
          clickFn: null
        },
        {
          svgName: '#icon-location',
          desc: '查找门店',
          clickFn: null
        }, {
          svgName: '#icon-edit',
          desc: '建议反馈',
          clickFn: null
        }
      ],
      userShopDetail: {
        shopName: '定位中...'
      },
      userShopGoodsList: []
    }
  }

  _getUserShopList = () => {
    const usrLocations = JSON.parse(localStorage.userLocation)
    let opts = {
      loStr: usrLocations.lng,
      laStr: usrLocations.lat
    }
    getUserShopList(opts).then((res) => {
      if (res && res.length) {
        let userShopDetail = this.state.userShopDetail
        userShopDetail = res[0]
        this.setState({ userShopDetail })
        this._findShowCaseRecommendList()
      }
    })
  }

  _findShowCaseRecommendList = () => {
    const opts = {
      shopCode: this.state.userShopDetail.shopCode
    }
    findShowCaseRecommendList(opts).then((res) => {
      if (res && res.length) {
        let userShopGoodsList = this.state.userShopGoodsList
        userShopGoodsList = res
        this.setState({ userShopGoodsList })
      }
    })
  }

  goSellOnline = () => {
    this.props.history.push({pathname: `/${CONFIG.APPID}/sellOnline/commodity/${this.state.userShopDetail.shopCode}`, state: {opts: {day: 1, name: 'john'}}})
  }

  componentDidMount() {
    this._getUserShopList()
  }

  render() {
    return (
      <div className="home">
        <div className="home-banner">
          <div className="home-banner-wrapper">
            <WingBlank>
              <Carousel
                autoplay={false}
                infinite
                beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                afterChange={index => console.log('slide to', index)}
              >
                {this.state.banner.imgArr.map((val, key) => (
                  <img
                    key={key}
                    src={val}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top', height: this.state.banner.imgHeight }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      let banner = this.state.banner
                      banner.imgHeight = 'auto'
                      this.setState({ banner });
                    }}
                  />
                ))}
              </Carousel>
            </WingBlank>
          </div>
        </div>

        <div className="home-loca">
          <div>
            <svg className="icon" aria-hidden="true">
              <use xlinkHref="#icon-locationfill"></use>
            </svg>{this.state.userShopDetail.shopName}
          </div>
          <div>
            <svg className="icon" aria-hidden="true">
              <use xlinkHref="#icon-right"></use>
            </svg>
          </div>
        </div>

        <div className="home-func">
          {this.state.func.map((val, key) => (
            <div key={key}>
              <span className="icon-wrapper">
                <svg className="icon" aria-hidden="true">
                  <use xlinkHref={val.svgName}></use>
                </svg>
              </span>
              <span className="desc">{val.desc}</span>
            </div>
          ))}
        </div>

        <div className="home-recommend-commodity">
          <div className="title">
            <span>推荐商品</span>
            <span>
              <svg className="icon" aria-hidden="true">
                <use xlinkHref="#icon-right"></use>
              </svg>
            </span>
          </div>
          <div className="content" onClick={this.goSellOnline.bind(this)}>
            <ul>
              {this.state.userShopGoodsList.map((val, key) => (
                <li key={key}>
                  <div className="img-avatar">
                    <LazyImage src={this.state.imgBaseURL + val.fileAddress}></LazyImage>
                  </div>
                  <div className="desc">{priceFormat(val.sellPrice)}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>

      </div >
    )
  }
}
